<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
	<title>Processing.js test of text()</title> 
	<script type="text/javascript" src="../../../processing.js"></script> 
	<style type="text/css"> 
	html, body
	{
		background: #EEE;
		font-family: Arial;
		font-size: 13px;
		margin: 0;
		padding: 0;
	}
	h1
	{
		background: #385C85;
		color: #FFF;
		padding: 10px;
		padding-left: 20px;
		margin-top: 0px;
	}
	h1 a
	{
		color: #FFF;
	}
	h2
	{
		padding-left: 20px;
	}
	p
	{
		padding-left: 20px;
		line-height: 1.3em;
	}
	p a
	{
		color: #385C85;
	}
	canvas
	{
		margin: 10px 0;
	}
	pre
	{
		margin-left: 20px;
		margin-right: 20px;
		padding: 5px;
		background: #FFF;
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
	}
	div.ref-col
	{
		float: left;
		width: 32%;
	}
	</style> 
</head> 
<body> 
	<h1>text() tests</h1> 
  <p>First group prints: int, float, char, and string.</p>
  <p>Second group (in boxes) prints text in-the-box: multi-line, wrapping, overflow.
  <p>
	<!-- copy paste your processing code below this script tag --> 
	<script id="script" type="application/processing"> 
 
size(400, 400);
background(0);
stroke(128);
fill(255);

line(10, 10, 10,30); line(10, 30, 50, 30);
text("default", 15, 25);

line(210, 10, 270, 10); line(210, 10, 210, 40);
line(210, 40, 270, 40); line(270, 10, 270, 40);
text("default", 210,10,60,30);

line(10, 70, 380, 70);
line(10, 120, 380, 120);
line(130, 50, 130, 140);
line(260, 50, 260, 140);
textAlign(RIGHT, BOTTOM); text("RiBo\nRiBo", 125, 65);
textAlign(RIGHT, CENTER); text("RiCe\nRiCe", 125, 95);
textAlign(RIGHT, TOP); text("RiTo\nRiTo", 125, 125);
textAlign(CENTER, BOTTOM); text("CeBo\nCeBo", 195, 65);
textAlign(CENTER, CENTER); text("CeCe\nCeCe", 195, 95);
textAlign(CENTER, TOP); text("CeTo\nCeTo", 195, 125);
textAlign(LEFT, BOTTOM); text("LeBo\nLeBo", 265, 65);
textAlign(LEFT, CENTER); text("LeCe\nLeCe", 265, 95);
textAlign(LEFT, TOP); text("LeTo\nLeTo", 265, 125);

line(0, 220, 390, 220);
line(0, 270, 390, 270);
line(0, 320, 390, 320);
line(0, 370, 390, 370);
line(0, 220, 0, 370);
line(130, 220, 130, 370);
line(260, 220, 260, 370);
line(390, 220, 390, 370);
textAlign(RIGHT, BOTTOM); text("RiBo\nRiBo", 5, 225, 120, 40);
textAlign(RIGHT, CENTER); text("RiCe\nRiCe", 5, 275, 120, 40);
textAlign(RIGHT, TOP); text("RiTo\nRiTo", 5, 325, 120, 40);
textAlign(CENTER, BOTTOM); text("CeBo\nCeBo", 135, 225, 120, 40);
textAlign(CENTER, CENTER); text("CeCe\nCeCe", 135, 275, 120, 40);
textAlign(CENTER, TOP); text("CeTo\nCeTo", 135, 325, 120, 40);
textAlign(LEFT, BOTTOM); text("LeBo\nLeBo", 265, 225, 120, 40);
textAlign(LEFT, CENTER); text("LeCe\nLeCe", 265, 275, 120, 40);
textAlign(LEFT, TOP); text("LeTo\nLeTo", 265, 325, 120, 40);
 
	</script> 
	<canvas id="display"></canvas> 
	<br /> 
	<pre style="border-style: dotted; border-width: 1px; background-color: #FFFFFF; padding: 2px; margin: 5px" id="scriptDisplay">
	</pre> 
  <script>
    document.getElementById("scriptDisplay").innerHTML = document.getElementById("script").text;
  </script>
	<br /> 
</body> 
</html> 
 
